<template>
  <div class="left_industry">
    <cn-title title="产业大数据"></cn-title>
    <div class="more_data">
      <div class="more_data_box">
        <div @click="openDetail('product')" class="title pointer">
          <img src="@/assets/img/l_title.png" alt="" />
          产业产量分析
          <span></span>
        </div>
        <div id="leftIndustryChart1" class="chart_1"></div>
      </div>
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          产业行情分析
          <span style="width: 230px"></span>
        </div>
        <select
          id="month"
          class="select_option"
          v-model="selectMonth"
          @change="onChange()"
        >
          <option
            v-for="(item, index) in selectList"
            :key="index"
            :value="item.value"
          >
            {{ item.name }}
          </option>
        </select>
        <div id="leftIndustryChart2" class="chart_2"></div>
      </div>
      <div class="more_data_box">
        <div class="title">
          <img src="@/assets/img/l_title.png" alt="" />
          数据中台分析
          <span style="width: 212px"></span>
        </div>
        <div id="leftIndustryChart3" class="chart_3"></div>
      </div>
    </div>
    <industry-product ref="industryProduct" />
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import IndustryProduct from "./components/IndustryProduct.vue";
export default {
  components: {
    CnTitle,
    IndustryProduct,
  },
  data() {
    return {
      selectMonth: "1",
      selectList: [
        { name: "一月", value: "1" },
        { name: "二月", value: "2" },
        { name: "三月", value: "3" },
        { name: "四月", value: "4" },
        { name: "五月", value: "5" },
        { name: "六月", value: "6" },
        { name: "七月", value: "7" },
        { name: "八月", value: "8" },
        { name: "九月", value: "9" },
        { name: "十月", value: "10" },
        { name: "十一月", value: "01" },
        { name: "十二月", value: "12" },
      ],
    };
  },
  mounted() {
    this.renderIndustryChart1();
    this.renderIndustryChart2();
    this.renderIndustryChart3();
  },
  methods: {
    onChange() {
      console.log(this.selectMonth);
    },
    openDetail(type) {
      switch (type) {
        case "product":
          // this.$refs.industryProduct.show = true;
          break;
      }
    },
    renderIndustryChart1() {
      let myChart = this.$echarts.init(
        document.getElementById("leftIndustryChart1")
      );
      let myData = [
        {
          value: 3476,
          name: "第一产业",
        },
        {
          value: 2016,
          name: "第二产业",
        },
        {
          value: 2418,
          name: "第三产业",
        },
      ];
      let colorList = ["#009BFF", "#0AFBFC", "#F4AF07"];
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {d}%",
        },
        legend: [
          {
            type: "scroll",
            orient: "vertical",
            right: 0,
            top: 30,
            bottom: 10,
            itemGap: 20,
            itemWidth: 10,
            itemHeight: 10,
            icon: "circle",
            formatter: function (name) {
              let str = "";
              let res = myData.filter((v) => v.name === name);
              if (res.length == 1) {
                str = "{name|" + name + " }{value|" + res[0].value + "}";
                switch (name) {
                  case "第一产业":
                    str = "{name|" + name + " }{a|" + res[0].value + "}";
                    break;
                  case "第二产业":
                    str = "{name|" + name + " }{b|" + res[0].value + "}";
                    break;
                  case "第三产业":
                    str = "{name|" + name + " }{c|" + res[0].value + "}";
                    break;
                }
                return str;
              }
              return str;
            },
            textStyle: {
              color: "#A6A6A6",
              rich: {
                name: {
                  fontSize: 14,
                  padding: [0, 20, 0, 0],
                  color: "#AED0EF",
                },
                value: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [0, 0, 0, 0],
                },
                a: {
                  fontSize: 14,
                  color: colorList[0],
                  padding: [0, 0, 0, 0],
                },
                b: {
                  fontSize: 14,
                  color: colorList[1],
                  padding: [0, 0, 0, 0],
                },
                c: {
                  fontSize: 14,
                  color: colorList[2],
                  padding: [0, 0, 0, 0],
                },
              },
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["50%", "100%"],
            width: "40%",
            center: ["50%", "50%"],
            color: ["rgb(230,224,60)", "rgb(43,196,255)", "rgb(255,78,45)"],
            itemStyle: {
              normal: {
                color: function (colors) {
                  return colorList[colors.dataIndex];
                },
              },
            },
            data: myData,
            labelLine: {
              normal: {
                show: false,
                length: 50,
                length2: 10,
                lineStyle: {
                  color: "#CCCCCC",
                  width: 2,
                  type: "dashed",
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderIndustryChart2() {
      let myChart = this.$echarts.init(
        document.getElementById("leftIndustryChart2")
      );
      let option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "12%",
          top: "24%",
          bottom: "13%",
          right: "8%",
        },
        xAxis: {
          data: [
            "物流产业",
            "生活服务",
            "养殖业",
            "种植业",
            "企事业",
            "跨境电商",
            "电商企业",
          ],
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#009BFF",
              width: 1, // 这里是为了突出显示加上的
            },
          },
          axisLabel: {
            color: "#AED0EF",
            fontSize: 12,
            fontFamily: "Bebas",
          },
        },
        yAxis: [
          {
            name: "(万元)",
            type: "value",
            min: 0,
            minInterval: 1,
            nameTextStyle: {
              fontSize: 10,
              color: "#074C8B",
              padding: [0, 24, 4, 0],
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
            },
            splitArea: { show: false },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              fontSize: 12,
              color: "#AED0EF",
              fontFamily: "Bebas",
            },
            splitNumber: 4,
          },
        ],
        dataZoom: [],
        series: [
          {
            type: "pictorialBar",
            barCategoryGap: "20px",
            symbol:
              "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0, 160, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 164, 255, 0.11)",
                  },
                ]),
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [21, 34, 21, 12, 34, 30, 21],
            z: 10,
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    renderIndustryChart3() {
      let myChart = this.$echarts.init(
        document.getElementById("leftIndustryChart3")
      );
      let option = {
        grid: {
          // 当图表长度或者宽度被压缩了，设置grid即可
          left: "5%",
          right: "6%",
          bottom: "0%",
          top: "25%",
          containLabel: true,
        },
        tooltip: {
          confine: true,
          trigger: "axis",
        },
        color: ["#009BFF", "#F65904", "#01FEA9", "#0AFBFC"],
        legend: {
          itemWidth: 10,
          itemHeight: 5,
          textStyle: {
            fontSize: 12,
            color: "#AED0EF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            axisTick: {
              show: false,
            },
            data: [
              "淘宝",
              "京东",
              "乐村淘",
              "拼多多",
              "抖音",
              "美团",
              "亚马逊",
            ],
          },
        ],
        yAxis: [
          {
            name: "（万元）",
            nameTextStyle: {
              color: "#074C8B",
              fontSize: 10,
              align: "right",
            },
            axisLabel: {
              textStyle: {
                color: "#AED0EF",
                fontSize: 11,
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", //虚线,
                color: "rgba(255,255,255,.1)",
              },
              show: true, //隐藏
            },
            splitNumber: 4,
          },
        ],
        series: [
          {
            name: "农场品",
            type: "bar",
            stack: "总量",
            barWidth: 12,
            data: [11, 8, 8, 11.5, 6.3, 9, 11.5],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#001252",
                    offset: 0,
                  },
                  {
                    color: "#013F8B",
                    offset: 0.5,
                  },
                  {
                    color: "#0296F7",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "养殖产品",
            type: "bar",
            stack: "总量",
            barWidth: 12,
            data: [14, 10.5, 11.2, 16.8, 9.5, , 14.2, 18.9],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#201541",
                    offset: 0,
                  },
                  {
                    color: "#923920",
                    offset: 0.5,
                  },
                  {
                    color: "#F55804",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "陶瓷产品",
            type: "bar",
            stack: "总量",
            barWidth: 12,
            data: [18.2, 15.4, 15.8, 18.6, 14.3, , 18.6, 25.6],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#010B4A",
                    offset: 0,
                  },
                  {
                    color: "#039681",
                    offset: 0.5,
                  },
                  {
                    color: "#01FAA7",
                    offset: 1,
                  },
                ],
              },
            },
          },
          {
            name: "羔羊肉",
            type: "bar",
            stack: "总量",
            barWidth: 12,
            data: [25.2, 24.4, 19.8, 20.6, 14.3, , 18.6, 25.6],
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    color: "#010F4D",
                    offset: 0,
                  },
                  {
                    color: "#05638B",
                    offset: 0.5,
                  },
                  {
                    color: "#058BA9",
                    offset: 1,
                  },
                ],
              },
            },
          },
        ],
      };

      myChart.setOption(option, { notMerge: true });
    },
  },
};
</script>

<style lang="scss" scoped>
.left_industry {
  width: 100%;
  height: 225px;
  .more_data {
    display: flex;
    height: calc(100% - 45px);
    padding: 10px 0;
    .more_data_box {
      height: 100%;
      position: relative;
      .select_option {
        background: #012865;
        color: #009bff;
        border: 1px solid #009bff;
        height: 20px;
        width: 60px;
        font-size: 12px;
        outline: none;
        position: absolute;
        right: 40px;
        top: 20px;
        z-index: 10;
      }
      .title {
        color: #fff;
        font-size: 18px;
        text-align: left;
        img {
          width: 15px;
          height: auto;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          width: 80px;
          border-top: 1px dashed #aed0ef;
          margin: 0 20px;
          transform: translateY(-5px);
          margin: 0 5px 0 20px;
        }
      }
    }
    .chart_1 {
      width: 256px;
      height: 141px;
    }
    .chart_2 {
      width: 410px;
      height: 141px;
    }
    .chart_3 {
      width: 392px;
      height: 141px;
    }
  }
}
</style>